Home 〉 CSS Tutorials 〉 CSS Selectors Explained: Element, Class, ID, Group, Descendant & Universal | Beginner's Guide
CSS Selectors Explained: Element, Class, ID, Group, Descendant & Universal | Beginner's Guide !
CSS Selectors Explained: Element, Class, ID, Group, Descendant & Universal | Beginner's Guide !
Looking to enhance your web styling skills?
This tutorial delves into the core CSS selectors: Element, Class, ID, Group, Descendant, and Universal. Each selector is explained with practical examples, demonstrating how to target and style HTML elements effectively. By mastering these selectors, you'll gain control over your webpage's design and layout. For a detailed exploration and hands-on examples, refer to this blog post.
Introduction
What are CSS selectors, and why are they crucial for web development? CSS selectors are patterns used to select and style elements on a webpage. They form the foundation of CSS, allowing developers to apply styles to specific HTML elements efficiently. Understanding these selectors is essential for creating well-structured and visually appealing web pages.
in the previous tutorials we have covered a short description on CSS Selectors, for more details refer to our blog post on CSS Syntax and Selectors Explained with Examples | Beginners Guide
In this Tutorial, we are going to cover the following CSS 'Simple Selectors':
- Element Selector
- Class Selector
- ID Selector
- Group Selector
- Descendant Selector
- Universal Selector
Element Selector
Targets HTML tags directly.
Code : 1 📝 
<!DOCTYPE html>
<html>
<head>
<style>
label {
background-color: yellow;
}
</style>
</head>
<body>
<p>This is a HTML paragraph tag</p>
<label>This is a HTML label tag.</label> <br>
<label>This is a HTML label tag.</label>
</body>
</html>
output 📌
This is a HTML paragraph tag
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
This styles all '<label>' tags.
Class Selector
Starts with a dot '.' and targets elements with that class.
Code : 2 📝
<!DOCTYPE html>
<html>
<head>
<style>
.para {
background-color: yellow;
}
</style>
</head>
<body>
<p id="phead1">This is a HTML Paragraph head</p>
<p class="para">This is a HTML paragraph tag 1.</p>
<p class="para">This is a HTML paragraph tag 2.</p>
<p>This is a HTML paragraph tag 3.</p>
</body>
</html>
output 📌
This is a HTML Paragraph head
This is a HTML paragraph tag 1.
This is a HTML paragraph tag 2.
This is a HTML paragraph tag 3.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
ID Selector
Starts with a hash '#' and targets a specific element with that ID.
Code : 3 📝
<!DOCTYPE html>
<html>
<head>
<style>
#phead {
background-color: yellow;
}
</style>
</head>
<body>
<p id="phead">This is a HTML Paragraph head</p>
<p class="para1">This is a HTML paragraph tag 1.</p>
<p class="para1">This is a HTML paragraph tag 2.</p>
<p>This is a HTML paragraph tag 3.</p>
</body>
</html>
output 📌
This is a HTML Paragraph head
This is a HTML paragraph tag 1.
This is a HTML paragraph tag 2.
This is a HTML paragraph tag 3.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Group Selector
Apply the same styles to multiple elements.
Code : 4 📝
<!DOCTYPE html>
<html>
<head>
<style>
span, #phead, .para {
background-color: yellow;
}
</style>
</head>
<body>
<p id="phead">This is a HTML Paragraph head</p>
<p class="para">This is a HTML paragraph tag 1.</p>
<p class="para">This is a HTML paragraph tag 2.</p>
<p>This is a HTML paragraph tag 3.</p>
<span>This is a Span</span>
</body>
</html>
output 📌
This is a HTML Paragraph head
This is a HTML paragraph tag 1.
This is a HTML paragraph tag 2.
This is a HTML paragraph tag 3.
This is a SpanYou can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Descendant Selector
Targets elements inside another element.
Code : 5 📝
<!DOCTYPE html>
<html>
<head>
<style>
.div1 p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="div1">
<h2>This is a HTML heading tag.</h2>
<h3>This is a another HTML heading tag.</h3>
<p id="phead">This is a HTML Paragraph head</p>
<p class="para">This is a HTML paragraph tag 1.</p>
<p class="para">This is a HTML paragraph tag 2.</p>
<p>This is a HTML paragraph tag 3.</p>
</div>
</body>
</html>
output 📌
This is a HTML heading tag.
This is a another HTML heading tag.
This is a HTML Paragraph head
This is a HTML paragraph tag 1.
This is a HTML paragraph tag 2.
This is a HTML paragraph tag 3.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Universal Selector
Targets all elements.
Example 📄
* {
box-sizing: border-box;
}
Conclusion
Ready to apply your knowledge of CSS selectors? With a solid understanding of Element, Class, ID, Group, Descendant, and Universal selectors, you're equipped to style your web pages with precision. These fundamental tools empower you to create clean, maintainable, and responsive designs. For more in-depth insights and advanced techniques, continue exploring our comprehensive CSS tutorials.
Suggested Posts:
- HTML Class & ID Attribute Explained with Examples | Use Multiple Classes and IDs in One Tag
- HTML div and span Tag Explained with Examples - Complete Guide
- HTML Heading Tag Tutorial with Examples | H1 to H6 Tags Explained
- HTML Paragraph Tag Tutorial with Examples | HTML '<p>' Tag Explained
Related Topics:
- HTML Block, Inline, and Empty Elements Explained with Examples
- Introduction to HTML: Elements, Tags, Structure & HTML5 Features
- CSS Tutorial for Beginners: Learn CSS Step by Step with Examples
- CSS Pseudo-Classes Explained with Examples | Complete Guide for Beginners
- CSS Media Query Tutorial for Responsive Design with Examples
Frequently Asked Questions (FAQs)
What is the difference between a class selector and an ID selector?
A class selector targets multiple elements with the same class, while an ID selector is unique and targets a single element. Use class selectors for reusable styles and ID selectors for unique elements.
How does the descendant selector differ from the child selector?
The descendant selector targets all nested elements, regardless of their depth, within a specified parent. In contrast, the child selector targets only direct child elements of a parent.
When should I use the universal selector?
The universal selector applies styles to all elements on a page. It's useful for resetting default styles or applying global styles, but use it sparingly to avoid performance issues.
Can I group selectors in CSS?
Yes, grouping selectors allows you to apply the same styles to multiple elements, reducing redundancy in your CSS code. . The code   stands for space.
Where can I learn more about CSS selectors?
For a comprehensive understanding, refer to the full tutorial linked above. Additionally, the [Wikipedia page on CSS] provides valuable insights into CSS selectors and their usage.